<template>
  <view class="custom-nav-box">
    <!-- 手机状态栏高度 -->
    <view :style="'height:' + statusBarHeight + 'rpx'" class="statusBar"></view>
    <!-- 微信导航栏高度-->
    <view :style="'height:' + navTitleHeight + 'rpx'" class="navBar">
      <!-- <view class="left-box"></view> -->
      <view class="title-box">{{ title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  created(){
    this.getSystemTab()
  },
  props:{
    title:{
        type:String,
        default:'标题'
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      navTitleHeight: 0
    }
  },
  methods: {
    getSystemTab() {
      let res = wx.getSystemInfoSync()
      let buttonInfo = wx.getMenuButtonBoundingClientRect()
      let navBarHeight =
        (buttonInfo.top - res.statusBarHeight) * 2 + buttonInfo.height
      let _navBarHeight =
        (navBarHeight * 750) / wx.getSystemInfoSync().windowWidth //导航栏高度
      this.navTitleHeight = _navBarHeight
      this.statusBarHeight =
        (res.statusBarHeight * 750) / wx.getSystemInfoSync().windowWidth //状态栏高度
    }
  }
}
</script>

<style lang="scss" scoped>
.title-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
